<template>
	<view class="tabs">
		<view class="scroll-h">
			<view v-for="(tab,index) in tabBars" :key="tab.id" class="uni-tab-item" :id="tab.id" :data-current="index"
				@click="ontabtap">
				<text class="uni-tab-item-title"
					:class="tabIndex == index ? 'uni-tab-item-title-active' : ''">{{tab.name || ''}}</text>
				<text v-show="tabIndex == index" class="uni-tab-item-text"></text>
			</view>
		</view>
		<swiper class="swiper" duration="300" :current="tabIndex" @change="ontabchange">
			<swiper-item class="swiper-item" :key="index" v-for="(itme,index) in tabData">
				<view class="tabs-con">
					<view class="tabs-picker">
						<view class="uni-list-cell-db" :key="i" v-for="(data,i) in itme.screen">
							<!-- <picker v-if="data.mode == 'date'" class="picker" mode="date" fields="day" :value="data.date" range-key="name" :start="data.startDate" :end="data.endDate"
								@change="bindDateChange">
								<text class="uni-input">{{data.title}}</text>
								<uni-icons type="bottom"  size="28r" />
							</picker> -->
							<view class="picker" v-if="data.mode == 'date'" @click="selectTimeClick">
								<text class="uni-input">{{data.title}}</text>
								<uni-icons type="bottom" size="28r" />
							</view>
							<picker v-else-if="data.mode == 'selector'" class="picker" :value="data.index"
								:range="data.array" range-key="name" @change="bindPickerChange">
								<text class="uni-input">{{data.title || ''}}</text>
								<uni-icons type="bottom" size="28r" />
							</picker>
							<picker v-else-if="data.mode == 'multiSelector'" class="picker" mode="multiSelector"
								:value="data.index" :range="data.array" @columnchange="bindMultiPickerColumnChange"
								@change="nianlingChange">
								<text class="uni-input">{{data.title || ''}}</text>
								<uni-icons type="bottom" size="28r" />
							</picker>
							<view v-else class="picker" @click="onClick()">
								<text class="uni-input">{{data.title || ''}}</text>
								<uni-icons v-if="addData.sort" type="top" size="28r" />
								<uni-icons v-else type="bottom" size="28r" />
							</view>
						</view>
					</view>
					<view class="tabs-list">
						<checkbox-group @change="checkboxChange">
							<template v-if="itme.state">
								<uni-list :border="false">
									<uni-list-item class="tabs-list-item" :border="false" v-for="obj in itme.listData"
										:key="obj.id">
										<!-- 自定义 header -->
										<view slot="header" class="slot-box">
											<label class="uni-list-cell uni-list-cell-pd">
												<!-- 此处的obj.value 可以换成obj.id 来获选取了哪几项 -->
												<checkbox :value="obj.id" :checked="obj.checked"
													style="display: none;" />
												<uni-icons :type="!obj.checked?'circle':'checkbox-filled'"
													:color="!obj.checked?'#C1C1C1':'#8dc9f1'" :size="'52r'" />
											</label>
										</view>
										<!-- 自定义 body -->
										<view slot="body" class="slot-box slot-main">
											<image class="slot-main-image" :src="obj.avatar[0]" mode=""></image>
											<view class="slot-main-con">
												<view class="main-con name">
													{{obj.real_name || ''}}({{obj.cleaner_level_name || ''}})
												</view>
												<view class="main-con score">
													<view class="dis-corder">
														<image class="img-14" :src="imgUrl1" mode="aspectFit" />
														<text style="color: #FEAD1D;">{{obj.score || ''}}</text>
													</view>
													<text class="m-c-text">已服务 {{obj.services_num || '0'}}次</text>
													<view class="dis-corder">
														<!-- <image class="img-14" :src="imgUrl5" mode="aspectFit" />
														<text>{{obj.distance || ''}}</text> -->
													</view>
												</view>
												<view class="main-con info">
													<view class="dis-corder" @click="scoreClick(obj.id)">
														<!-- <image class="img-14" :src="imgUrl6" mode="aspectFit" /> -->
														<!-- 									<text class="dis-corder-pj">
															评价
														</text> -->
														<image class="img-14" :src="pinglun" mode="aspectFit" />
														<text>{{obj.evaluate_num || '0'}}</text>
													</view>
													<view class="dis-corder" @click="praiseClick(obj)">
														<image class="img-14"
															:src="obj.collection?shouchangXz:shouchang"
															mode="aspectFit" />
														<text>{{obj.collection_num || '0'}}</text>
													</view>
													<view class="dis-corder" @click="openCalendar(obj.id)">
														<image class="img-14" :src="imgUrl7" mode="aspectFit" />
														<text>可预约时间</text>
													</view>
													<!-- 													<view class="dis-corder" @click="openCalendar(obj.id)">
														<image class="img-14" :src="imgUrl7" mode="aspectFit" />
														<text>{{obj.aa === true ? '已预约' : '可预约时间'}}</text>
													</view>
													<button v-if="obj.aa" class="serviceBtn" plain @click="openTel"
														size="mini">联系客服</button> -->
												</view>
											</view>
										</view>
									</uni-list-item>
								</uni-list>
								<uni-load-more v-if="itme.listData.length != 0" iconType="auto"
									:status="tabData[tabIndex].status" @clickLoadMore="clickLoadMore"
									:content-text="contentText" />
							</template>
							<view style="width: 100%;display: flex;flex-direction: column;align-items: center;" v-else>
								<image :src="imgUrl" mode="widthFix" style="width: 360rpx;margin: 100rpx 0;"></image>
								<text style="font-size: 32rpx;font-weight: 500;color: #777777;">今日服务员已被约完!</text>
							</view>
						</checkbox-group>
					</view>
				</view>
				<view class="tabs-floor">
					<view class="iocs">
						<uni-icons :type="!itme.iocState?'circle':'checkbox-filled'"
							:color="!itme.iocState?'#C1C1C1':'#8dc9f1'" :size="'52r'" @click="iocClick(tabIndex)" />
						<text class="iocs-text">全选</text>
					</view>
					<view class="but">
						<view class="num">
							<text class="num-text">已选：</text>
							<text class="num-text num-text1">{{itme.listVal.length || '0'}}</text>
						</view>
						<button class="but-but" size="mini" @click="addClick(tabIndex)">立即预约</button>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<uni-popup type="bottom" ref="popup" @change="change" @maskClick="onPopup" :mask-click="false">
			<view class="popup">
				<view class="info-card">
					<uni-card :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'20rpx'" :padding="0">
						<view class="card-list">
							<view class="c-l-top">
								<image class="c-l-t-img" :src="detailsData.avatar[0]" mode=""></image>
								<view class="c-l-t-con">
									<view class="c-l-t-title">
										<view class="">
											<text style="margin-right: 50rpx;"
												class="c-l-t-name">{{detailsData.real_name || ''}}</text>
											<uni-icons type="phone-filled" color="#33D182" size="16"></uni-icons>
											<text class="c-l-t-name"
												style="margin-left:5rpx;">{{detailsData.phone}}</text>
										</view>
										<view class="c-l-t-info">
											<image class="c-l-t-ioc" :src="imgUrl1" mode=""></image>
											<text class="c-l-t-text">{{detailsData.score || ''}}</text>
										</view>
									</view>
									<text class="c-l-e-text">{{detailsData.cleaner_des || ''}}</text>
								</view>
							</view>
							<view class="c-l-end">
								<view class="c-l-e-kp">
									<image class="img-14" :src="imgUrl4" mode="aspectFit"></image>
									<text class="c-l-e-text">实名认证</text>
								</view>
								<view class="c-l-e-kp">
									<image class="img-14" :src="imgUrl3" mode="aspectFit"></image>
									<text class="c-l-e-text">已培训</text>
								</view>
								<view class="c-l-e-kp">
									<image class="img-14" :src="imgUrl2" mode="aspectFit"></image>
									<text class="c-l-e-text">已考试</text>
								</view>
								<view class="c-l-e-kp">
									<image class="img-14" src="../../../static/imgas/xing.png" mode="aspectFit"></image>
									<text class="c-l-e-text">{{detailsData.cleaner_level}}</text>
								</view>
							</view>
						</view>
					</uni-card>
				</view>
				<view class="list-card">
					<template v-if="commentsData.length != 0">
						<uni-card :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'0 20rpx'"
							:padding="0">
							<uni-list :border="false">
								<uni-list-item :border="false" :key="index" v-for="(i,index) in commentsData">
									<view slot="body" class="l-c">
										<view class="l-c-top">
											<image class="l-c-img" :src="i.logo[0]" mode=""></image>
											<view class="l-c-title">
												<view class="l-c-name">
													<text class="l-c-text">{{i.hotel_name || ''}}</text>
													<text class="l-c-date">{{i.create_time || ''}}</text>
												</view>
												<view class="l-c-iocn">
													<image class="l-c-i-img" :src="imgUrl1" mode="aspectFit"
														:key="indexa" v-for="(j,indexa) in i.star"></image>
												</view>
											</view>
										</view>
										<view class="l-c-con">
											<text class="l-c-c-text">{{i.content || ''}}</text>
										</view>
										<view class="l-c-end">
											<uni-tag :circle="true" :text="s" :key="indexs"
												v-for="(s,indexs) in i.label"></uni-tag>
										</view>
									</view>
								</uni-list-item>
							</uni-list>
							<uni-load-more iconType="auto" :status="status1" @clickLoadMore="clickLoadMore1"
								:content-text="contentText" />
						</uni-card>
					</template>
					<view style="width: 100%;display: flex;flex-direction: column;align-items: center;" v-else>
						<image :src="imgUrl" style="width: 360rpx;margin: 100rpx 0; height: 330rpx;"></image>
						<text style="font-size: 32rpx;font-weight: 500;color: #777777;">暂无数据!</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="selectTime" type="bottom">
			<view class="selectTime-popup">
				<uni-calendar class="uni-calendar--hook" :startDate="startDate" :insert="true"
					@change="calendarChange" />
			</view>
		</uni-popup>
		<!-- <view class="selectTime-popup">
			<uni-calendar ref="selectTime" class="uni-calendar--hook" :clearDate="false" :clear-date="true"  :insert="false" :startDate="startDate" @confirm="confirm" @close="close"/>
		</view> -->
		<uni-popup ref="calendar" type="bottom">
			<view class="calendar-popup">
				<uni-calendar class="uni-calendar--hook" :date="inDate" :startDate="startDate" :endDate="startDate"
					:insert="true" :selected="selected" />
			</view>
		</uni-popup>

	</view>
</template>

<script>
	function getDate(type, index = 0, state = 0) {
		const dates = new Date();
		const date = new Date(dates)
		date.setDate(date.getDate() + index) // 获取index天后的日期
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 1;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;
		if (state == 0) return `${year}-${month}-${day}`;
		else return `${year}-${month}`;
	}
	export default {
		data() {
			return {
				imgUrl: `${getApp().globalData.imgScr}jd/dingdankongzhuangtai.png`,
				imgUrl1: `${getApp().globalData.imgScr}jd/xinji.png`,
				imgUrl2: `${getApp().globalData.imgScr}jd/yikaoshi.png`,
				imgUrl3: `${getApp().globalData.imgScr}jd/yipeixun.png`,
				imgUrl4: `${getApp().globalData.imgScr}jd/shimingrenzheng.png`,
				imgUrl5: `${getApp().globalData.imgScr}jd/dizhi.png`,
				imgUrl6: `${getApp().globalData.imgScr}jd/pj2.png`,
				imgUrl7: `${getApp().globalData.imgScr}jd/yuyueshijian.png`,
				shouchang: `${getApp().globalData.imgScr}jd/shouchang.png`, // 未点赞图片
				shouchangXz: `${getApp().globalData.imgScr}jd/shouchang_xz.png`, // 已点赞图片
				pinglun: `${getApp().globalData.imgScr}jd/pinglun.png`,
				tabIndex: 0, // 顶部切换栏状态 0：短期工 1：长期工
				tabBars: [{ // 顶部切换栏 数据
					name: '短期工',
					id: 1
				}, {
					name: '长期工',
					id: 2
				}],
				tabData: [ // 中间切换内容数据
					{
						id: 1,
						// === 筛选栏内容 ===
						screen: [{
								id: 1,
								title: '时间',
								mode: 'date',
								date: getDate(),
								startDate: getDate(),
								endDate: getDate('end'),
							},
							// {
							// 	id: 2,
							// 	title: '性别',
							// 	mode: 'selector',
							// 	index: 0,
							// 	array: [{
							// 		name: '不限'
							// 	}, {
							// 		name: '男'
							// 	}, {
							// 		name: '女'
							// 	}]
							// },
							// {
							// 	id: 3,
							// 	title: '年龄',
							// 	mode: 'multiSelector',
							// 	index: [0, 0],
							// 	array: [
							// 		[20, 25, 30, 35, 40, 45, 50],
							// 		[25, 30, 35, 40, 45, 50, 55]
							// 	]
							// },
							{
								id: 4,
								title: '销量',
							}
						],
						// === 列表内容 ===
						state: true,
						listData: [],
						listVal: [],
						iocState: false,
						page: 1, // 初始页码
						total: 0, // 数据总条数
						status: 'more', // 加载状态
					},
					{
						id: 2,
						// === 筛选栏内容 ===
						screen: [{
								id: 1,
								title: '时间',
								mode: 'date',
								date: getDate(),
								startDate: getDate(),
								endDate: getDate('end'),
							},
							{
								id: 2,
								title: '性别',
								mode: 'selector',
								index: 0,
								array: [{
									name: '不限'
								}, {
									name: '男'
								}, {
									name: '女'
								}]
							},
							{
								id: 3,
								title: '年龄',
								mode: 'multiSelector',
								index: [0, 0],
								array: [
									[20, 25, 30, 35, 40, 45, 50],
									[25, 30, 35, 40, 45, 50, 55]
								]
							},
							{
								id: 4,
								title: '销量',
							}
						],
						// === 列表内容 ===
						state: true,
						listData: [],
						listVal: [],
						iocState: false,
						page: 1, // 初始页码
						total: 0, // 数据总条数
						status: 'more', // 加载状态
					}
				],
				addData: { // 发送的数据
					date: '', // 筛选时间
					sort: 0, // 排序 0是不排序 1是排序
					age: '', // 年龄
					sex: 0, // 性别
				},
				page: 1, // 初始页码
				total: 0, // 数据总条数
				status: 'more', // 加载状态
				contentText: { // 加载状态对应的提示语
					contentdown: '点击加载更多数据',
					contentrefresh: '正在加载中...',
					contentnomore: '没有更多数据'
				},
				uid: '', // 点击评论的当前列id
				detailsData: {}, // 评论详情数据
				commentsData: [], // 评论数据
				page1: 1, // 评论初始页码
				total1: 0, // 评论数据总条数
				status1: 'more', // 评论加载状态
				store_longitude: '', // 经度
				store_latitude: '', // 纬度
				inDate: '', // 最早可预约时间
				selected: [], // 可预约时间
				startDate: getDate(), // 可选时间范围
				data: { // 客服相关信息
					tel: '', // 客服电话
					wechat: '', // 客服微信号
					wxImg: '', // 客服微信二维码
				},
			};
		},
		onLoad(option) {
			let _this = this
			this.$http.get('/index/Communal/config_data', {
				config_id: 5
			}).
			then(function(res) {
				//这里只会在接口是成功状态返回
				_this.data.tel = res.customer_service_phone.value
			}).catch(function(e) {
				//这里只会在接口是失败状态返回，不需要去处理错误提示
				uni.showToast({
					title: e.errMsg,
					icon: "none"
				})
			});
		},
		onShow() {
			let _this = this
			if (!this.store_longitude || !this.store_latitude) {
				uni.authorize({
					scope: 'scope.userLocation',
					success(res) {
						uni.getLocation({
							success(reo) {
								_this.store_longitude = reo.longitude
								_this.store_latitude = reo.latitude
								Object.assign(_this.tabData[_this.tabIndex], _this.$options.data().tabData[
									_this.tabIndex])
								Object.assign(_this.addData, _this.$options.data().addData)
								_this.getData(_this.tabIndex)
							}
						})
					},
					fail(e) {
						_this.tabData[_this.tabIndex].state = false
						uni.showToast({
							title: "需要授权位置信息才可获取服务员信息！",
							icon: "none"
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/tag/my/my'
							});
						}, 1500)
					}
				})
			} else {
				Object.assign(this.tabData[this.tabIndex], this.$options.data().tabData[this.tabIndex])
				Object.assign(this.addData, this.$options.data().addData)
				this.getData(this.tabIndex)
			}
		},
		onHide() {
			this.tabData[this.tabIndex].iocState = false;
			this.tabData[this.tabIndex].listData.map(itme => {
				itme.checked = false
			});
			this.tabData[this.tabIndex].listVal = []
		},
		onPullDownRefresh() {
			let _this = this
			setTimeout(function() {
				uni.showToast({
					title: "刷新成功",
					icon: "none"
				})
				// 恢复初始状态
				Object.assign(_this.tabData[_this.tabIndex], _this.$options.data().tabData[_this.tabIndex])
				Object.assign(_this.addData, _this.$options.data().addData)
				_this.getData(_this.tabIndex)
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			/**
			 * 顶部栏 切换时触发
			 * @param {object} e  获取切换元素的实例
			 */
			ontabtap(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.tabIndex = index;
			},
			/**
			 * 性别选择框值发生变化时触发
			 * @param {object} e 获取变化值的实例对象 e.detail.value 为实例对象的值
			 * */
			bindPickerChange: function(e) {
				this.addData.sex = e.detail.value
				// this.tabData[this.tabIndex].screen[1].index = e.detail.value;
				Object.assign(this.tabData[this.tabIndex], this.$options.data().tabData[this.tabIndex])
				this.getData(this.tabIndex)
			},
			/**
			 * 时间选择器 值发生变化时触发
			 * @param {Object} e 获取变化值的实例对象 e.detail.value 为实例对象的值
			 */
			bindDateChange: function(e) {
				this.tabData[this.tabIndex].screen[0].date = e.detail.value
				this.addData.date = e.detail.value
				Object.assign(this.tabData[this.tabIndex], this.$options.data().tabData[this.tabIndex])
				this.getData(this.tabIndex)
			},
			/**
			 * 点击销量时触发
			 */
			onClick() {
				this.addData.sort = this.addData.sort == 0 ? 1 : 0
				Object.assign(this.tabData[this.tabIndex], this.$options.data().tabData[this.tabIndex])
				this.getData(this.tabIndex)
			},
			/**
			 * 轮播图 页面切换时触发
			 * @param {Object} e 切换到的轮播图页面实例对象
			 */
			ontabchange(e) {
				let index = e.target.current || e.detail.current;
				this.tabIndex = index;
				if (this.tabData[this.tabIndex].listData.length == 0) this.getData(this.tabIndex)
				// this.addData.date = this.tabIndex?getDate(1,1,0):getDate(1,1,0)
			},
			/**
			 * 年龄 多了选择器 值发生变化时触发
			 * @param {Object} e 值发生变化后的实例对象
			 * @param {numbut} e.detail.column  修改的列
			 * @param {numbut} e.detail.value  修改的列的值
			 */
			bindMultiPickerColumnChange: function(e) {
				this.tabData[0].screen[2].index[e.detail.column] = e.detail.value
				switch (e.detail.column) {
					case 0: //拖动第1列
						switch (this.tabData[0].screen[2].index[0]) {
							case 0:
								this.tabData[0].screen[2].array[1] = [25, 30, 35, 40, 45, 50, 55]
								break
							case 1:
								this.tabData[0].screen[2].array[1] = [30, 35, 40, 45, 50, 55]
								break
							case 2:
								this.tabData[0].screen[2].array[1] = [35, 40, 45, 50, 55]
								break
							case 3:
								this.tabData[0].screen[2].array[1] = [40, 45, 50, 55]
								break
							case 4:
								this.tabData[0].screen[2].array[1] = [45, 50, 55]
								break
							case 5:
								this.tabData[0].screen[2].array[1] = [50, 55]
								break
							case 6:
								this.tabData[0].screen[2].array[1] = [55]
								break
						}
						this.tabData[0].screen[2].index.splice(1, 1)
						break
				}
				this.$forceUpdate()
			},
			/**
			 * 选择年龄后触发
			 * @param {Object} e
			 */
			nianlingChange(e) {
				let arr = e.detail.value
				let arr1 = this.tabData[this.tabIndex].screen[2].array
				let arr2 = []
				arr2[0] = arr1[0][arr[0]]
				arr2[1] = arr1[1][arr[1]]
				this.addData.age = arr2.join()
				Object.assign(this.tabData[this.tabIndex], this.$options.data().tabData[this.tabIndex])
				this.getData(this.tabIndex)
			},
			/**
			 * 点击复选框时触发
			 * @param {Object} e 复选框实例对象
			 */
			checkboxChange: function(e) {
				let _this = this
				this.tabData[this.tabIndex].listVal = e.target.value;
				let items = this.tabData[this.tabIndex].listData,
					values = e.detail.value;
				console.log('this.tabData', this.tabData)
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.indexOf(item.id.toString()) >= 0 || values.indexOf(item.id) >= 0) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				};
				this.tabData[this.tabIndex].iocState = values.length === items.length;
			},
			/**
			 * 全选按钮事件
			 * @param {number} data 当前页面的状态位 0 ：长期工  1：短期工
			 */
			iocClick: function(data) {
				console.log('data', data)
				this.tabData[this.tabIndex].iocState = !this.tabData[this.tabIndex].iocState;
				this.tabData[this.tabIndex].listData.map(itme => {
					itme.checked = this.tabData[this.tabIndex].iocState
				});
				if (this.tabData[this.tabIndex].iocState) {
					this.tabData[this.tabIndex].listVal = []
					this.tabData[this.tabIndex].listData.forEach(itme => {
						if (itme.checked) this.tabData[this.tabIndex].listVal.push(itme.id)
					});
				} else {
					this.tabData[this.tabIndex].listVal = []
				}
			},
			/**
			 * 评论按钮触发事件
			 * @param {Object} data 当前列数据
			 */
			async scoreClick(id) {
				let _this = this
				this.uid = id

				try {
					let res = await this.$http.get('/index/Hotelcleaner/cleanerinfo', {
						id: id
					})
					this.detailsData = res
					let rep = await this.$http.get('/index/Hotelcleaner/cleaner_evaluatelist', {
						id: id,
						page: 1,
						limit: 10
					})
					this.commentsData = rep.data
					this.status1 = this.page1 >= rep.last_page ? 'no-more' : 'more'
					// 打开弹出层
					uni.hideTabBar({
						animation: true,
						success: function() {
							_this.$refs.popup.open()
						}
					})
				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon: "none"
					})
				}

			},
			/**
			 * 收藏按钮触发事件
			 * @param {object} data 当前列的数据
			 */
			async praiseClick(data) {
				let _this = this
				uni.showLoading({
					title: !data.collection ? '收藏中...' : '取消收藏中...',
					mask: true
				})
				try {
					let index = this.tabIndex == 0 ? 2 : this.tabIndex
					let res = await this.$http.post('/index/Hotelorder/collection', {
						cleaner_id: data.id,
						cleaner_type: index
					})
					let rep = await this.$http.get('/index/Hotelcleaner/cleanerinfo', {
						id: data.id
					})
					_this.$set(data, 'collection', !data.collection)
					_this.$set(data, 'collection_num', rep.collection_num)
					uni.hideLoading()
					uni.showToast({
						icon: "none",
						title: data.collection ? '收藏成功' : '取消成功'
					})
				} catch (e) {
					uni.hideLoading()
					uni.showToast({
						title: e.errMsg,
						icon: "none"
					})
				}
			},

			/**
			 * 筛选时间弹窗
			 */
			selectTimeClick() {
				this.$refs.selectTime.open()
			},

			/**
			 * 选择日期触发
			 */
			calendarChange(e) {
				console.log('确定', e);
				this.tabData[this.tabIndex].screen[0].date = e.fulldate
				this.addData.date = e.fulldate
				Object.assign(this.tabData[this.tabIndex], this.$options.data().tabData[this.tabIndex])
				this.getData(this.tabIndex)
				this.$refs.selectTime.close()
			},

			/**
			 * 日历确定按钮
			 */
			confirm(e) {
				console.log('确定', e);
				this.tabData[this.tabIndex].screen[0].date = e.fulldate
				this.addData.date = e.fulldate
				Object.assign(this.tabData[this.tabIndex], this.$options.data().tabData[this.tabIndex])
				this.getData(this.tabIndex)
			},

			/**
			 * 日历取消按钮
			 */
			close() {
				console.log('取消');
			},
			/**
			 * 查看可预约时间
			 */
			async openCalendar(id) {
				try {
					let res = await this.$http.get("/index/Hotelcleaner/cleaner_time", {
						cleanertype: [2, 1][this.tabIndex],
						cleanerid: id
					})
					this.selected = res
					if (res[0] != null && res[0] != undefined) this.inDate = res[0].date
					else this.inDate = ''
					this.$refs.calendar.open()
				} catch (e) {
					uni.showToast({
						title: e.errMsg,
						icon: "none"
					})
				}
			},
			/**
			 * 立即预约按钮触发事件
			 * @param {number} i 当前页面的状态位 0 ：长期工  1：短期工
			 */
			addClick: function(i) {
				if (!uni.getStorageSync('hotelData').loin) return uni.showToast({
					title: "未登录，请登录后在试！",
					icon: "none"
				})
				else if (uni.getStorageSync('hotelData').state != 2) return uni.showToast({
					title: "认证通过后方可预约服务员！",
					icon: "none"
				})
				else if (!this.tabData[i].listVal.length) return uni.showToast({
					title: "请选择服务员！",
					icon: "none"
				})
				else if (!this.addData.date) return uni.showToast({
					title: "请先选择预约时间！",
					icon: "none"
				})
				else if (this.tabData[i].listVal.length > 0) {
					let pid = this.tabData[i].listVal.toString()
					let type = i == 0 ? 2 : 1
					let date = this.addData.date
					// if(this.addData.date == '') this.addData.date = i?getDate(1,1,1):getDate(1,1,0)
					console.log('---------------')
					uni.navigateTo({
						url: `/hotelAdmin/procter/order/order?id=${pid}&type=${type}&date=${date}`
					})
					console.log('---------------')
				} else {
					uni.showToast({
						title: "请选择服务员",
						icon: "none"
					})
				}

			},
			/**
			 * 弹出层状态发生变化触发
			 * @param {Object} e  e={show: true｜false,type:当前模式}
			 */
			change: function(e) {},
			/**
			 * 获取数据
			 * @param {number} i
			 */
			async getData(i = 0, page = 1, limit = 10) {
				let _this = this
				try {
					let res = await this.$http.post('/index/Hotelcleaner/cleaner_list', {
						cleaner_type: i == 0 ? 2 : i,
						page: page,
						limit: limit,
						store_longitude: this.store_longitude,
						store_latitude: this.store_latitude,
						services_num: this.addData.sort,
						gender: this.addData.sex,
						age: this.addData.age,
						time: this.addData.date
					})
					this.tabData[i].state = res.data.length > 0
					this.tabData[i].listData = res.data
					this.tabData[i].status = this.tabData[i].page >= res.last_page ? 'no-more' : 'more'
					let items = this.tabData[i].listData,
						values = this.tabData[i].listVal;
					for (let j = 0, lenI = items.length; j < lenI; ++j) {
						let item = items[j]

						if (values.indexOf(item.id.toString()) >= 0 || values.indexOf(item.id) >= 0) {
							this.$set(item, 'checked', true)
						} else {
							this.$set(item, 'checked', false)
						}
					};
					items.forEach(item => {
						if (item.real_name.indexOf("机器") != -1)
							item.aa = true
					})
					// uni.hideLoading()
				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon: "none"
					})
					// uni.hideLoading()
				}
			},
			/**
			 * 保洁列表加载更多按钮
			 * @param {Object} e 加载更多的状态 
			 */
			async clickLoadMore(e) {
				if (e.detail.status == 'no-more') return this.tabData[this.tabIndex].status = 'no-more'
				this.tabData[this.tabIndex].status = 'loading'
				this.tabData[this.tabIndex].page += 1
				try {
					let rep = await this.$http.get('/index/Hotelcleaner/cleaner_list', {
						cleaner_type: this.tabIndex == 0 ? 2 : this.tabIndex,
						page: this.tabData[this.tabIndex].page,
						limit: 10,
						store_longitude: this.store_longitude,
						store_latitude: this.store_latitude,
					})
					this.tabData[this.tabIndex].listData = [...this.tabData[this.tabIndex].listData, ...rep.data]
					this.tabData[this.tabIndex].total = rep.total
					if (this.tabData[this.tabIndex].page >= rep.last_page) return this.tabData[this.tabIndex].status =
						'no-more'
					console.log('当前分页', this.page)
					this.tabData[this.tabIndex].status = 'more'
				} catch (e) {
					uni.showToast({
						title: e.errMsg,
						icon: "none"
					})
				}
			},
			/**
			 * 评论列表加载更多按钮
			 * @param {Object} e 加载更多的状态 
			 */
			async clickLoadMore1(e) {
				if (e.detail.status == 'no-more') return
				this.status1 = 'loading'
				this.page1 += 1
				try {
					let rep = await this.$http.get('/index/Hotelcleaner/cleaner_evaluatelist', {
						id: this.uid,
						page: this.page1,
						limit: 10
					})
					this.commentsData = [...this.commentsData, ...rep.data]
					this.total1 = rep.total
					if (this.page1 >= rep.last_page) return this.status1 = 'no-more'
					this.status1 = 'more'
				} catch (e) {
					uni.showToast({
						title: e.errMsg,
						icon: "none"
					})
				}
			},
			/**
			 * 点击遮罩层触发
			 */
			onPopup: async function() {
				await this.$refs.popup.close()
				this.page1 = 1
				this.status1 = 'more'
				this.total1 = 0
				await uni.showTabBar({
					animation: true
				})
			},
			// 机器人联系客服
			openTel: function() {
				let _this = this
				uni.makePhoneCall({
					phoneNumber: _this.data.tel //仅为示例
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		// background-color: #ffffff;
		/* #ifndef APP-PLUS */
		height: 100vh;

		/* #endif */
		.swiper {
			height: calc(100% - 100rpx);

			.swiper-item {
				display: flex;
				flex-direction: column;
			}
		}

		::v-deep .selectTime-popup {
			.uni-calendar-item__weeks-box {
				width: 100rpx;
				height: 100rpx;
				overflow: hidden;
				border-radius: 50%;
			}

			.uni-calendar-item--isDay,
			.uni-calendar-item--checked {
				background-color: #8dc9f1;
			}
		}

		::v-deep .calendar-popup {
			.uni-calendar-item--checked {
				color: #c0c0c0;
				opacity: 1;
				background: rgba(0, 0, 0, 0);
			}

			.uni-calendar-item--isDay {
				color: #c0c0c0;
				opacity: 1;
				background: rgba(0, 0, 0, 0);
			}

			.uni-calendar-item--extra {
				color: #8dc9f1;
				opacity: 0.8;
			}
		}

	}

	// 顶部 长期工和短期工切换栏样式
	.scroll-h {
		display: flex;
		// justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
	}

	.uni-tab-item {
		position: relative;
		flex: 1;
		display: inline-block;
		// padding-left: 34rpx;
		// padding-right: 34rpx;
		text-align: center;
	}

	.uni-tab-item-title {
		color: rgba($color: #000000, $alpha: 0.7);
		font-size: 28rpx;
		height: 80rpx;
		line-height: 80rpx;
		opacity: 0.7;
	}

	.uni-tab-item-text {
		position: absolute;
		bottom: 8rpx;
		left: 50%;
		transform: translateX(-50%);
		height: 4rpx;
		width: 36rpx;
		background: linear-gradient(255deg, #8dc9f1, #d8eefc);
		border-radius: 2rpx;
	}

	// 中间内容选项卡 字体样式
	.uni-tab-item-title-active {
		color: #000000;
		font-size: 34rpx;
		font-weight: 600;
	}

	// 统一的 小图片样式
	.img-14 {
		width: 36rpx;
		height: 36rpx;
		margin: 10rpx;
	}

	// 小图片和描述信息的对齐方式
	.dis-corder {
		display: flex;
		align-items: center;

		&-pj {
			font-size: 22rpx;
			font-weight: bold;
			color: #7F7F7F;
			line-height: 30rpx;
			border: 2rpx solid #8D8D8D;
			border-radius: 8rpx;
			margin-right: 10rpx;
			padding: 0 10rpx;
		}
	}

	// 中间 轮播图内容的样式
	.tabs-con {
		box-sizing: border-box;
		flex: 1;
		padding-bottom: 20rpx;
		margin: 20rpx;
		// background-color: #ffffff;
		overflow: hidden;

		// 选择器 的样式
		.tabs-picker {
			display: flex;
			align-items: center;
			height: 100rpx;
			background-color: #ffffff;
			margin-bottom: 16rpx;
			border-radius: 20rpx;

			.uni-list-cell-db {
				flex: 1;
				text-align: center;

				.picker {
					line-height: 98rpx;
				}
			}
		}

		.uni-input {
			font-size: 28rpx;
			font-weight: 600;
			color: rgba($color: #000000, $alpha: 0.7);
		}

		// 中间列表区域的样式
		.tabs-list {
			height: calc(100% - 100rpx);
			overflow: auto;

			::v-deep .uni-list {
				background-color: transparent;
			}

			&-item {
				border-radius: 20rpx;
				margin-bottom: 16rpx;
				overflow: hidden;
			}
		}

		// 列表每一项内容的样式
		.uni-list-item__container {
			box-sizing: border-box;
			height: 200rpx;
			padding: 20rpx;
		}

		// 列表区域 自定义 header body 公共样式
		.slot-box {
			display: flex;
			align-items: center;
		}

		// 列表区域 自定义 body 的样式
		.slot-main {
			flex: 1;
			margin-left: 16rpx;

			// 列表区域 图片样式
			.slot-main-image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 20rpx;
				border: 0;
			}

			// 列表区域 详情信息 样式
			.slot-main-con {
				flex: 1;
				display: flex;
				flex-direction: column;
				margin-left: 16rpx;

				.main-con {
					flex: 1;
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #000000;
				}

				.name {
					font-size: 28rpx;
					font-weight: 600;
				}

				.score {
					justify-content: space-between;
					margin: 12rpx 0;
				}

				.info {
					justify-content: space-between;
				}

				.m-c-text {
					margin-left: 50rpx;
				}
			}
		}
	}

	// 底部全选区域样式
	.tabs-floor {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		padding: 20rpx;
		margin-bottom: 20rpx;
		background-color: #ffffff;

		// 全选图标样式
		.iocs {
			display: flex;
			align-items: center;

			.uni-icons {
				font-size: 52rpx;
			}

			.iocs-text {
				font-size: 32rpx;
				margin-left: 10rpx;
			}
		}

		// 立即预约按钮样式
		.but {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding-right: 20rpx;

			.num {
				margin-right: 48rpx;

				.num-text {
					font-size: 32rpx;
					font-weight: 600;
				}

				.num-text1 {
					font-weight: 400;
					color: #DD524D;
				}
			}

			.but-but {
				line-height: 64rpx;
				border-radius: 32rpx;
				background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
				font-size: 32rpx;
				color: #FFFFFF;
			}

			.but-but::after {
				display: none;
			}
		}
	}

	// 弹出层样式
	.popup {
		width: 100%;
		height: 80vh;
		border-radius: 20rpx 20rpx 0 0;
		overflow: auto;
		background-color: #F5F5F5;

		.uni-card {
			border-radius: 20rpx;
		}

		// 保洁详情信息 卡片
		.info-card {
			.card-list {
				display: flex;
				flex-direction: column;

				.c-l-top {
					display: flex;
					align-items: center;

					.c-l-t-img {
						width: 130rpx;
						height: 130rpx;
						border-radius: 20rpx;
						overflow: hidden;
						border: 0;
						margin-right: 20rpx;
					}

					.c-l-t-con {
						flex: 1;
						display: flex;
						flex-direction: column;
						height: 130rpx;

						.c-l-t-title {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.c-l-t-name {
								font-size: 28rpx;
								font-weight: bold;
								color: #000000;
							}

							.c-l-t-info {
								.c-l-t-ioc {
									width: 28rpx;
									height: 28rpx;
									margin-right: 6rpx;
								}

								.c-l-t-text {
									font-size: 28rpx;
									font-weight: 500;
									color: #FEAD1D;
								}
							}
						}
					}

					.c-l-e-text {
						font-size: 20rpx;
						font-weight: 500;
						line-height: 1.2em;
						color: rgba($color: #000000, $alpha: 0.5);
					}
				}

				.c-l-end {
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					.c-l-e-kp {
						flex: 1;
						display: flex;
						justify-content: center;
						align-items: center;

						.c-l-e-text {
							font-size: 24rpx;
							font-weight: 500;
							color: rgba($color: #000000, $alpha: 0.5);
							margin-left: 6rpx;
						}
					}
				}
			}
		}

		// 酒店评价信息列表
		.list-card {
			.uni-list-item__container {
				padding: 20rpx 0;
			}

			.l-c {
				width: 100%;
			}

			// 标题栏
			.l-c-top {
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;

				.l-c-img {
					width: 60rpx;
					height: 60rpx;
					margin-right: 20rpx;
					border-radius: 30rpx;
					overflow: hidden;
				}

				.l-c-title {
					flex: 1;
					height: 60rpx;

					.l-c-name {
						display: flex;
						align-items: center;
						width: 100%;
						justify-content: space-between;
						margin-bottom: 10rpx;

						.l-c-text {
							font-size: 26rpx;
							font-weight: bold;
							color: #000000;
							margin-right: 50rpx;
						}

						.l-c-date {
							font-size: 24rpx;
							font-weight: 500;
							color: rgba($color: #000000, $alpha: 0.5);
						}
					}

					.l-c-iocn {
						display: flex;
						align-items: center;
						width: 100%;

						.l-c-i-img {
							width: 24rpx;
							height: 24rpx;
							margin-right: 10rpx;
						}
					}
				}
			}

			// 内容栏
			.l-c-con {
				display: flex;
				margin-bottom: 25rpx;
				margin-left: 10rpx;

				.l-c-c-text {
					font-size: 24rpx;
					font-weight: 500;
					line-height: 1.2em;
					color: rgba($color: #000000, $alpha: 0.7);
				}
			}

			// 底部标签栏
			.l-c-end {
				margin: 10rpx;
				display: flex;

				/deep/.uni-tag {
					color: #000;
					opacity: .7;
					border: 0;
					border-radius: 5rpx;
					font-family: -webkit-body;
					background-color: #f7f7f7;
					margin: 0rpx 20rpx 20rpx 0;
					border-radius: 5rpx !important;
				}
			}
		}
	}
</style>
